<!DOCTYPE html>
<html>
<head>
    {include file="public/head"}
    <style>
        .grids-icon i{font-size:26px;}

        .bring-detail li{display: flex;margin: 10px;background-color: #fff;padding: 10px 0;border-radius: 4px;}
        .bring-detail li .avatar{flex: 1;}
        .bring-detail li .avatar p{height: 60px;width: 60px;margin: 0 auto;}
        .bring-detail li .base{flex: 2;}
        .bring-detail li .base p{height: 20px;line-height: 20px;padding-left: 10px;overflow: hidden;}
        .bring-detail li .base p:last-child{color: #999;}
        .bring-detail img{width: 100%;height: 100%;border-radius: 4px;}
    </style>
</head>
<body>
<div class="g-flexview">
    <header class="m-navbar">
        <a href="javascript:history.back();" class="navbar-item">
            <i class="back-ico"></i>
        </a>
        <div class="navbar-center">
            <span class="navbar-title">我的旷工</span>
        </div>
    </header>
    <div class="g-scrollview" id="J_List">
        <ul class="bring-detail" id="worker_list"></ul>
    </div>
</div>
{include file="public/js"}
<script type="text/html" id="template">
    {{each list as index}}
    <a href="javascript:void(0);">
        <li>
            <div class="avatar">
                <p><img src="{{index.img}}"></p>
            </div>
            <div class="base">
                <p>{{index.name}}</p>
                <p>预计收益:{{index.estimated_income}}</p>
                <p>当前收益:{{index.current_income}}</p>
            </div>
        </li>
    </a>
    {{/each}}
</script>
<script>
    !function ($) {
        /* 通过自定义的方法获取数据【通常是需要定义变量当前第几页page，和每页请求的记录数pageSize】 */
        var page = 1, pageSize = 15;
        $('#J_List').infiniteScroll({
            pageSize: pageSize,
            initLoad: true,
            binder: '#J_List', // 监听滚动容器，用于判断当前进度条是否位于可视区域
            loadingHtml: '<img src="/static/img/loading.svg">', /* <strong>加载中...</strong> 当然也可以<img src="../img/loading.gif" /> */
            loadListFn: function () {
                var def = $.Deferred();
                /* 通过自定义的方法获取数据 */
                $.ajax({
                    url: '/index/index/myWorker',
                    dataType: 'json',
                    data: { page: page, pagesize: pageSize },
                    success: function (ret) {
                        /* 假设ret.list为后端返回的列表数组 */

                        /* 用你喜欢的方法将获取到的数据拼接成HTML，然后插入；*/
                        /* 建议使用模板引擎，示例使用artTemplate；https://github.com/aui/artTemplate */

                        //var html = ret.list + '将数据拼接成html';
                        var html=template('template',{list : ret.list});
                        $('#worker_list').append(html);

                        /* 获取数据，并插入页面后，调用resole，并传入当前获取的记录列表集合 */
                        def.resolve(ret.list);

                        /* 页码自增1 */
                        ++page;
                    }
                });
                return def.promise();
            }
        });
    }(jQuery);
</script>
</body>
</html>